<template>
    <div id = "MywithdrawTo">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getMy"></i>
            <span>提现</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="MywithdrawTo-Box">
            <div class="Box-Money">
                <div class="Box-Money-top">
                    <span>可提现金额</span>
                    <span>{{MywithdrawToMoney | formatMoney}}</span>
                </div>
                <div class="Box-Money-center">
                    <span class="spanMoney">提现金额</span>
                    <div class="BoxMoney">
                        <span>￥</span>
                        <input style="text" oninput = "value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model.number ="BoxMoney">
                    </div>
                </div>
                <div class="Box-Money-buttom" v-if="moneyShowaa">
                    <p>
                        <span>实际到账金额：</span>
                        <span>{{Actualmoney | formatMoney}}</span>
                    </p>
                    <p>
                        <span>收取手续费：</span>
                        <span>{{feemoney | formatMoney}}</span>
                    </p>
                </div>
                <div class = "Box-Money-buttom" :style="moneyColor" v-else>
                    <p>输入金额超过零钱余额</p>
                </div>
            </div>
        </div>
        <div class="hint">
            <span>注意：提现需要收取{{MywithdrawToRates | Rates}}的手续费，每月15号同一打款</span>
        </div>
        <div class="withdraw-Box">
            <div class="withdraw">
                <div class="withdraw-One">
                    <span>提现方式</span>
                </div>
                <div class="withdrawB" @click="Alipay">
                   <img src="../assets/Mymi/Alipay.png" class="ImgOne">
                   <div v-if="!VShow">  
                   </div>
                   <img src="../assets/Mymi/down.png" class="ImgTwo" v-else>
                </div>
                <div class="withdrawAccount" v-show="VShow">
                    <div class="withdrawAccountOne">
                        <span>账号：</span>
                        <input type="text" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}" v-model="Account">
                    </div>
                    <div class="withdrawAccountTwo">
                        <span>昵称：</span>
                        <input type="text" v-model="nickname">
                    </div>
                </div>

                <div class="withdrawB" @click="Wechat">
                    <img src="../assets/Mymi/Wechat.png" class="ImgOne">
                    <div v-if="!VShow1">  
                    </div>
                    <img src="../assets/Mymi/down.png" class="ImgTwo" v-else>
                </div>
                <div class="withdrawAccount" v-show="VShow1">
                    <div class="withdrawAccountOne">
                        <span>账号：</span>
                        <input type="text" oninput="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" v-model="Account1">
                    </div>
                    <div class="withdrawAccountTwo">
                        <span>昵称：</span>
                        <input type="text" v-model="nickname1">
                    </div>
                </div>
                <div class="withdrawB" @click="ATMcard">
                    <img src="../assets/Mymi/ATMcard.png" class="ImgOne">
                    <div  v-if="!VShow2">  
                    </div>
                    <img src="../assets/Mymi/down.png" class="ImgTwo" v-else>
                </div>
                <div class="withdrawAccount" v-show="VShow2">
                    <div class="withdrawAccountOne">
                        <span>账号：</span>
                        <input type="text" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}" v-model="Account2">
                    </div>
                    <div class="withdrawAccountTwo">
                        <span>姓名：</span>
                        <input type="text" v-model="nickname2">
                    </div>
                </div>
            </div>
        </div>
        <div class="button-Box">
            <button @click="getBox">确认提现</button>
        </div>

    </div>
</template>
<script>
import { Toast } from "vant";
export default {
    name:"MywithdrawTo",
    data() {
        return {
            MywithdrawToMoney:"",
            BoxMoney:"",
            MywithdrawToRates:"",
            UserID:"",

            VShow:false,
            VShow1:false,
            VShow2:false,
            //回现的提现账号
            accountMoney:[],
            Account:"",
            nickname:"",
            Account1:"",
            nickname1:"",
            Account2:"",
            nickname2:"",
            manner:"",//提现方式
            accountName:"",//提现昵称
            account:"",//提现账号
            moneyColor:"color:red"
        }
    },
    created(){
        var list = JSON.parse(localStorage.getItem("key"));
        this.UserID = list.userId;
    },
    mounted () {
        this.PostMonet();
        this.ShowInformation();
    },
    filters:{
        formatMoney:function(value){
            if(!!value || !0){
                return "￥"+ value;
            } 
        }, 
        Rates(value){
            return value +"%";
        }
    },
    computed: {
        Actualmoney(){
            if(this.MywithdrawToMoney >= this.BoxMoney){
                let Actual =  this.BoxMoney * (1-this.MywithdrawToRates/100);
                return Actual.toFixed(2);
            }
            else{
                return ""
            }
        },
        feemoney(){
            if(this.MywithdrawToMoney >= this.BoxMoney){
                let fee = this.BoxMoney * (this.MywithdrawToRates/100)
                return fee.toFixed(2); 
            }
            else{
                return ""
            }
        },
        moneyShowaa(){
            if(this.MywithdrawToMoney >= this.BoxMoney){
                return true; 
            }
            else{
                return false
            }
        },
     
    },
    methods: {
        PostMonet(){
            this.$axios.get("app/withdrawal/MoneyAndRate/"+this.UserID)
            .then(res => {
                // console.log(res);
                   this.MywithdrawToMoney =  res.data.data.money;
                   this.MywithdrawToRates =  res.data.data.rate;
            });
        },
        getMy(){
            this.$router.push("/Mymi");
        },
        getBox(){
            // console.log(String(this.BoxMoney))
            let Mo =  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if(this.MywithdrawToMoney < this.BoxMoney){
                Toast("余额不足")
                return false;
            }
            if(this.BoxMoney == "" || String(this.BoxMoney) == "0"){
                 Toast("请输入提现金额")
                 return false;
            }
            if(this.manner === ""){
                Toast("请输入提现方式");
                return false;
            }
            if(this.manner === "2"){
                this.accountName = this.nickname;
                this.account = this.Account;
                this.withdraw();
            }
            if(this.manner === "1"){
                this.accountName = this.nickname1;
                this.account = this.Account1;
                this.withdraw();
            }
            if(this.manner === "0"){
                this.accountName = this.nickname2;
                this.account = this.Account2;
                let pattern = /^([1-9]{1})(\d{14}|\d{18})$/,
	            str = this.account.replace(/\s+/g, "");
                if(pattern.test(str)){
                     this.withdraw();
                }
                else{
                    Toast("请输入正确的银行卡号");
                    return false;
                }
            }
        },
        withdraw(){
            if(this.accountName == ""){
                Toast("请输入昵称")
                return false;
            }
            else if(this.account == ""){
                Toast("请输入提现账号")
                return false;
            }
            else{
                this.$axios.post("/app/withdrawal/add",{
                    uId:this.UserID,
                    money:this.BoxMoney,
                    realityMoney:this.Actualmoney,
                    rate:this.MywithdrawToRates,
                    manner:this.manner,
                    accountName:this.accountName,
                    account:this.account,
                })
                .then(res => {
                    // console.log("提现",res);
                    if(res.data.code == 0){
                        this.PostMonet();
                        this.BoxMoney = "";
                        Toast("提现成功") 
                    }
                 
                });
            }
        },
        Alipay(){
            if(this.VShow == false){
                this.VShow = true;
                this.VShow1 = false;
                this.VShow2 = false;
                this.manner = "2";
                this.accountName = this.nickname;
                this.account = this.Account;
            }
            else{
                this.VShow = false
                this.manner = "";
            }
        },
        Wechat(){
            if(this.VShow1 == false){
                this.VShow1 = true;
                this.VShow = false;
                this.VShow2 = false;
                this.manner = "1";
                this.accountName = this.nickname1;
                this.account = this.Account1;
            }
            else{
                this.VShow1 = false;
                 this.manner = "";
            }
        },
        ATMcard(){
            if(this.VShow2 == false){
                this.VShow2 = true;
                this.VShow1 = false;
                this.VShow = false;
                this.manner = "0";
                this.accountName = this.nickname2;
                this.account = this.Account2;
            }
            else{
                this.VShow2 = false;
                 this.manner = "";
            }
        },
        // 展示提现账号信息
        ShowInformation(){
            this.$axios.post("/system/account/list",{
                uId:this.UserID
            }).then(res =>{
                // console.log("账号",res)
                this.accountMoney = res.data.data;
                this.AccountStyle();
            })
        },
        AccountStyle(){
            for(let i = 0; i<this.accountMoney.length;i++){
                if(this.accountMoney[i].accountType == 0){
                    this.Account2 = this.accountMoney[i].account;
                    this.nickname2 = this.accountMoney[i].accountName
                }
                if(this.accountMoney[i].accountType == 1){
                    this.Account1 = this.accountMoney[i].account;
                    this.nickname1 = this.accountMoney[i].accountName
                }
                if(this.accountMoney[i].accountType == 2){
                    this.Account = this.accountMoney[i].account;
                    this.nickname = this.accountMoney[i].accountName
                }
            }
        }
      
    },
}
</script>
<style lang="less" scoped>
#MywithdrawTo{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    position: relative;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.2rem;
        line-height: 1.2rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF
    }
    .MywithdrawTo-Box{
        width: 100%;
        height: auto;
        .Box-Money{
            width: 6.9rem;
            height: 4.04rem;
            margin: 0.2rem auto;
            background: white;
            border-radius: 0.2rem;
            overflow: hidden;
            .Box-Money-top{
                width: 100%;
                height: 1.66rem;
                font-family: "PingFang-SC-Medium";
                span:nth-child(1){
                    display: block;
                    width: 100%;
                    height: .845rem;
                    font-size: .28rem;
                    line-height: .845rem;
                    color: #666666;
                    margin-left: .38rem;
                }
                span:nth-child(2){
                    display: block;
                    width: 6.12rem;
                    line-height: .845rem;
                    height: .845rem;;
                    font-size: .36rem;
                    color: #333333;
                    margin-left: .38rem;
                    border-bottom: .02rem solid rgb(206, 206, 206);
                }
            }
            .Box-Money-center{
                width: 100%;
                height: 1.66rem;
                font-family: "PingFang-SC-Medium";
                font-size: 0px;
                .spanMoney{
                    display: block;
                    width: 100%;
                    height: .845rem;
                    font-size: .28rem;
                    line-height: .845rem;
                    color: #666666;
                    margin-left: .38rem;
                }
                .BoxMoney{
                    width: 6.12rem;
                    height: .845rem;
                    font-size: .36rem;
                    color: #333333;
                    line-height: .845rem;
                    display: flex;
                    border-bottom: .02rem solid rgb(206, 206, 206);
                    margin-left: .38rem;
                    span{
                        width: 5%;
                        height: .845rem;
                        line-height: .845rem;  
                        font-size: .36rem;
                        color: #333333;
                        }
                }
                input{
                    width: 6.12rem;;
                    line-height: .8rem;
                    height: .8rem;;
                    font-size: .36rem;
                    color: #333333;
                    padding-left:0.1rem; 
                }  
            }
            .Box-Money-buttom{
                width: 100%;
                height: 0.71rem;
                font-size: .26rem;
                display: flex;
                line-height: 0.71rem;
                p{
                    width: 3.45rem;
                    height: 0.71rem;
                    margin-left: .38rem;
                    span:nth-child(2){
                        display: inline-block;
                        width: 1.1rem;
                    }
                }
            }
          
        }

    }
    .hint{
        font-size: 0.22rem;
        color: #666666;
        font-family: "PingFang-SC-Medium";
        width: 100%;
        height: 0.6rem;
        span{
            display: block;
            width: 6.9rem;
            height: 0.6rem;
            // background: red;
            margin: 0px auto;
        }
    }
    .withdraw-Box{
        width: 100%;
        .withdraw{
            width: 6.9rem;
            margin: 0 auto;
            font-size: 0rem;
            background: white;
            border-radius: 0.2rem;
            .withdraw-One{
                width: 100%;
                height: 0.88rem;
                line-height: 0.88rem;
                span{
                    font-size: 0.28rem;
                    color: #666666;
                    margin-left: 0.3rem;

                }
            }
            .withdrawB{
                width: 100%;
                height: 0.89rem;
                display: flex;
                border-bottom: .01rem solid rgba(206, 206, 206,0.7);
                .ImgOne{
                    width: 0.45rem;
                    height: 0.45rem;
                    margin: 0.225rem 5.49rem 0rem 0.305rem;
                }
                div{
                    width: 0.33rem;
                    height: 0.33rem;
                    border: 0.02rem solid #999999;
                    border-radius: 50%;
                    margin-top: 0.275rem;
                }
                .ImgTwo{
                        width: 0.33rem;
                        height: 0.33rem;
                        border-radius: 50%;
                        margin-top: 0.275rem;
                    }
            }
            .withdrawAccount{
                width: 100%;
                height: 1rem;
                font-size: 0.24rem;
                display: flex;
                line-height: 1rem;
                border-bottom: .01rem solid rgba(206, 206, 206,0.7);
                .withdrawAccountOne{
                    width: 4.4rem;
                    height: 1rem;
                    position: relative;
                    span{
                        margin-left: 0.3rem;
                        color: #666666;
                    }
                    input{
                        width: 2.97rem;
                        height: 0.41rem;
                        background:rgba(248,248,248,1);
                        border-radius: 0.1rem;
                        color: #333333;
                    }

                }
                .withdrawAccountTwo{
                    width: 2.5rem;
                    height: 1rem;
                    span{
                        color: #666666;
                    }
                    input{
                        width: 1.52rem;
                        height: 0.41rem;
                        background:rgba(248,248,248,1);
                        border-radius: 0.1rem;
                        color: #333333;
                    }
                }
            }
        }
    }
    .button-Box{
        width: 100%;
        height:  0.88rem;
        font-size: 0px;
        position: absolute;
        top: 11.5rem;
        left: 0rem;
        button{
            width: 6.9rem;
            height: 0.88rem;
            font-size: 0.28rem;
            color: #FFFFFF;
            border-radius: 0.4rem; 
            margin-left: 0.3rem;
            background: #38A83F;
          
        }
    }
}
</style>